<template>
<div>

<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">首页</el-menu-item>
  
   <el-menu-item index="2"><a  @click="goBuyer">我的</a></el-menu-item>
  <el-submenu index="3">
    <template slot="title">消息中心</template>
    <el-menu-item index="2-1">官网客服消息</el-menu-item>
    <el-menu-item index="2-2">卖家消息</el-menu-item>
    <el-menu-item index="2-3">买家消息</el-menu-item>
    
  </el-submenu>

  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    <el-menu-item index="5" >网站导航</el-menu-item>
  <el-submenu index="6">
    <template slot="title">我的</template>
    <el-menu-item index="2-1">已经卖出的宝贝</el-menu-item>
    <el-menu-item index="2-2">我的收藏</el-menu-item>
    <el-menu-item index="2-3">我的上新</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">个人信息</template>
      <el-menu-item index="2-4-1">收货地址</el-menu-item>
      <el-menu-item index="2-4-2">个人信息管理</el-menu-item>
      <el-menu-item index="2-4-3">我的钱包</el-menu-item>
    </el-submenu>
  </el-submenu>
</el-menu>

<div>
  <el-row>
  <el-col :span="8" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '10px' }">
      <img src="../assets/images/logo2.jpg" class="image">
      <div style="padding: 10px;">
        <span>商品123</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

</div>

</div>

</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    goBuyer(){
        this.$router.push("/Buyer");
     },

   }
}
</script>

<style scoped>
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 200px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
.box{
    margin: 0 auto;
    padding-top: 80px;
    height: 50px;
    width: 100%;
  }
  .searchBox{
    margin: 0 auto;
    width: 60%;
    position: relative;
  }
  .searchInput{
    display: inline-block;
    width: 85%;
    height: 38px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .searchButton{
    display: inline-block;
    width: 15%;
    height: 38px;
    line-height: 40px;

    background-color: #00a0e9;
    font-size: 16px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: none;
    color: #fff;
  }
  body {
   
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
   
}
</style>
